<template>
  <div class="contian">
    <image
      class="icon"
      :src="
        type == 'onlineExam'
          ? require('@/static/images/exam/online.png')
          : require('@/static/images/exam/offline.png')
      "
    ></image>
    <div class="examName">
      {{
        type == "onlineExam"
          ? "考核"
          : type == "offlineExam"
          ? "线下考核"
          : type == "testCheck"
          ? "考核抽查"
          : "习题练习"
      }}
    </div>
    <!-- <div class="workstation">工作站</div> -->
    <!-- <div class="item flexcen">
      <div class="lable">考试题目</div>
      <div class="value overtxt">考试题目</div>
    </div> -->
    <div class="item flexcen" v-if="info.duration">
      <div class="lable">考试时间</div>
      <div class="value overtxt">{{ info.duration }}</div>
    </div>
    <div class="item flexcen">
      <div class="lable">卷面总分</div>
      <div class="value overtxt">{{ info.totalScore }}</div>
    </div>
    <div class="item flexcen">
      <div class="lable">通过分数</div>
      <div class="value overtxt">{{ info.passingGrade }}</div>
    </div>
    <div class="handle" @click="startConfirmOpen = true">
      {{
        type == "onlineExam" || type == "offlineExam"
          ? "开始考试"
          : type == "testCheck"
          ? "开始考核"
          : "开始练习"
      }}
    </div>
    <!-- 考试确认框 -->
    <vDialog
      :showDialog.sync="startConfirmOpen"
      :contentText="`是否确认${
        type == 'onlineExam' || type == 'offlineExam'
          ? '开始考试'
          : type == 'testCheck'
          ? '开始考核'
          : '开始练习'
      }?`"
      @confirm="startConfirm"
    ></vDialog>
  </div>
</template>

<script>
import vDialog from "@/components/v-dialog";
import { getExam } from "@/common/api/exam";
export default {
  name: "message",
  components: { vDialog },
  data() {
    return {
      id: "", //可能是考试 也可能是练习
      type: "",
      taskId: "",
      orderCourseId: "",
      courseStuId: "",
      info: "",
      taskName: "",
      startConfirmOpen: false,
    };
  },
  onLoad(options) {
    console.log("开始考试页面", options);
    this.type = options.type;
    this.taskName = options.taskName;
    this.orderCourseId = options.orderCourseId;
    this.courseStuId = options.courseStuId;
    this.taskId = options.taskId;
    uni.setNavigationBarTitle({
      title: options.taskName,
    });
    if (this.type == "onlineExam") {
      this.id = options.examId;
    } else if (this.type == "offlineExam") {
      this.id = options.examId;
    } else {
      this.id = options.examId;
    }
  },
  onShow() {
    this.getInfo();
  },
  methods: {
    startConfirm() {
      uni.redirectTo({
        url: `/pages/selectiCourse/exam?type=${this.type}&id=${this.id}&taskId=${this.taskId}&courseStuId=${this.courseStuId}&orderCourseId=${this.orderCourseId}&status=inProgress&taskName=${this.taskName}`, // 新页面的路径
      });
    },
    async getInfo() {
      uni.showLoading({ mask: true, title: "加载中" });
      let res = await getExam(this.id);
      this.info = res.data;
    },
  },
};
</script>

<style scoped lang='scss'>
.contian {
  padding-top: 120rpx;
  .icon {
    margin: 0 auto;
    width: 120rpx;
    height: 120rpx;
  }

  .examName {
    margin-top: 16rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
  }

  .workstation {
    margin-bottom: 64rpx;
    margin-top: 24rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
  }
  .item {
    margin-top: 24rpx;
    .lable {
      margin: 0 80rpx 0 0;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 40rpx;
    }

    .value {
      width: 50rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 40rpx;
    }
  }

  .handle {
    margin: 88rpx auto 0 auto;
    @include btn_plain_line(
      linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
      #ffffff,
      #ff9a00
    ) {
      width: 684rpx;
      height: 88rpx;
      border-radius: 44rpx;
    }
  }
}
</style>
